<template>
  <div class="app-container">
    <div class="manage-header">
      <dynamic-search-form inline :formData="formData" :form="queryParams" @postForm="postData"></dynamic-search-form>
    </div>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="warning"
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['system:user:export']"
        >导出</el-button>
      </el-col>

      <el-popover title="列筛选" trigger="click" style="float: right;margin-right: 10px;">
        <el-checkbox-group v-model="checkedColumns" size="mini">
          <el-checkbox style="display: block;" v-for="(item,index) in columns" :key="item.label" :label="item.label"
                       @change="chickBoxGroupChange(item)"
          >{{ item.label }}
          </el-checkbox>
        </el-checkbox-group>
        <el-button size="small" slot="reference"><i class="el-icon-arrow-down el-icon-menu"></i></el-button>
      </el-popover>
    </el-row>


    <dynamic-table :list="list" @handleSelectionChange="handleSelectionChange" :options="options"
                  :columns="columns" :operates="operates">
    </dynamic-table>
    <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
                @pagination="getList"/>
  </div>
</template>

<script>
import dynamicSearchForm from '@/views/components/dynamicSearchForm'
import dynamicTable from '@/views/components/dynamicTable'
import { getColumns,listData } from "@/api/pms/workspace";

export default {
  name: 'workspace',
  components: {
    dynamicSearchForm,
    dynamicTable
  },
  computed: {},
  data() {
    return {
      list: [], // table数据
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        name: undefined
      },
      total: null,
      formData: [

      ],
      checkedColumns: [],
      options: {// table 的参数
        stripe: true, // 是否为斑马纹 table
        loading: false, // 是否添加表格loading加载动画
        highlightCurrentRow: true, // 是否支持当前行高亮显示
        mutiSelect: true // 是否支持列表项选中功能
      },
      columns: [],// 需要展示的列
      // 按钮
      operates: {// 列操作按钮
        width: 150,
        list: [
          {
            id: '1',
            label: '打开',
            style: 'cursor:pointer;color: #409eff;',
            class: 'el-icon-edit',
            show: true,
            plain: false,
            method: (index, row) => {
              this.handleTo(row)
            }
          }
        ]
      }
    }
  },
  created() {
    this.getColumn();
    this.getList();
  },
  methods: {
    chickBoxGroupChange(item) {
      item.show = !item.show
    },
    handleSelectionChange(val) {

    },
    postData(val){
      this.queryParams={
        pageNum: 1,
        pageSize: 10,
      }
      var keys=Object.keys(val)
      for(var i=0;i<keys.length;i++){
        this.queryParams[keys[i]]=val[keys[i]]
      }
      this.getList();
    },
    // 搜索
    handleQuery(){
      this.queryParams.pageNum = 1;
      this.getList();
    },
    // 重置
    resetQuery(){
      this.queryParams.pageNum = 1;
      this.queryParams.name = undefined;
      this.handleQuery();
    },
    // 新增
    handleAdd() {

    },
    // 导出
    handleExport(){

    },
    // 编辑
    handleEdit(index, row) {
    },
    // 删除
    handleDel(index, row) {

    },
    handleTo(row){
      this.$router.push({path: '/workspace/workspace_detail/'+ row.id});
    },
    getColumn() {
      this.loading = true
      getColumns().then(response => {
        this.columns = response.data;
        this.columns.forEach((item, index) => {
          this.checkedColumns.push(item.label)
        });
        this.loading = false
      })
    },
    getList() {
      this.loading = true
      listData(this.queryParams).then(response => {
        this.list = response.rows
        this.total = response.total
        this.loading = false
      })
    },


  }
}
</script>
